<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

	<title>阅读文章</title>

	<!-- Required meta tags always come first -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">
	<link rel="stylesheet" type="text/css" href="css/xtiper.css">

	<!-- Main Styles CSS -->
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/fonts.min.css">

	<!--引入Jquery-->
	<script src="js/jQuery/jquery-3.4.1.js"></script>
	<!--引入MarkDown-->
	<link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/css/editormd.preview.css" />
	<script type="text/javascript" src="plug-ins/EditorMD/lib/marked.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/lib/prettify.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/lib/raphael.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/lib/underscore.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/lib/sequence-diagram.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/lib/flowchart.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/lib/jquery.flowchart.min.js"></script>
	<script type="text/javascript" src="plug-ins/EditorMD/editormd.amd.min.js"></script>


	<!-- Main Font -->
	<script src="js/libs/webfontloader.min.js"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>

</head>
<body class="page-has-left-panels page-has-right-panels">
<div id="wholeContent">
	<!--用于判断用户是否登录-->
	<p th:if="${session.loginUser != null}" id="isLogin"></p>
	<!-- Preloader -->

	<div id="hellopreloader">
		<div class="preloader">
			<svg width="45" height="45" stroke="#fff">
				<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
					<circle cx="22" cy="22" r="6" stroke="none">
						<animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
								 values="6;22"/>
						<animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
								 repeatCount="indefinite" values="1;0"/>
						<animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
								 repeatCount="indefinite" values="2;0"/>
					</circle>
					<circle cx="22" cy="22" r="6" stroke="none">
						<animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
								 values="6;22"/>
						<animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
								 repeatCount="indefinite" values="1;0"/>
						<animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s"
								 repeatCount="indefinite" values="2;0"/>
					</circle>
					<circle cx="22" cy="22" r="8">
						<animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
								 values="6;1;2;3;4;5;6"/>
					</circle>
				</g>
			</svg>

			<div class="text">Loading ...</div>
		</div>
	</div>

	<div th:replace="~{leftSidebar :: leftSidebar}"></div>

	<div th:replace="~{rightSidebar :: rightSiebar}"></div>


	<header th:replace="~{header :: header}"></header>

	<div class="header-spacer header-spacer-small"></div>

	<div class="container" style="margin-top: -15px">
		<div class="row mt50">

			<div class="col col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
				<div class="ui-block">
					<!-- Single Post -->
					<p th:text="${article.article.articleId}" class="d-none" id="articleId"></p>
					<article class="hentry blog-post single-post single-post-v3">
						<div class="row">
						<h1 class="post-title" th:text="${article.article.articleTitle}" th:if="${article.article.articleTitle} ne null"></h1>
							<small class="text-center align-self-center" th:if="${article.article.type == 3}">
								转发自:
								<a   th:href="@{/lookUserProfilePage(userName=${comment.userName})}"></a>
							</small>
						</div>
						<div class="author-date">
							<div class="author-thumb">
								<a href=""><img style="width: 50px;height: 50px" alt="author" th:src="${article.author.imagePath}" src="img/friend-harmonic7.jpg" class="avatar"></a>
							</div>
							<a class="h5 post__author-name fn" href="#" th:text="${article.author.userName}"></a> &emsp;发表于&emsp;
							<div class="post__date">
								<time class="published" th:text="${#dates.format(article.article.publishTime,'yyyy-MM-dd HH:mm')}">
								</time>
							</div>
						</div>
						<div class="post-content-wrap">
							<div class="post-content">
								<div id="doc-content">
									<textarea style="display:none;">[[${article.article.articleContent}]]</textarea>
								</div>
								<div class="row" th:if="${article.article.articleTitle} == null">
									<div class="col-xs-6 col-md mt-3"  th:if="${images} != null and ${images.size() == 1}">
										<a href="javascript:void(0)" class="thumbnail">
											<img th:src="${path}" class="card-img-top smallimg" alt="..."
												 style="height: 100%">
										</a>
									</div>
									<div class="col-xs-6 col-md-4 mt-3"  th:if="${images.size() > 1}" th:each="path : ${images}">
										<a href="javascript:void(0)" class="thumbnail">
											<img th:src="${path}" class="card-img-top smallimg" alt="..."
												 style="height: 100%">
										</a>
									</div>
								</div>
							</div>
						</div>

						<div class="choose-reaction reaction-colored">
							<div class="title" th:text="${article.article.articleTags}"></div>

							<ul>
								<li>
									<a href="#" class="post-add-icon inline-items">
										<svg class="olymp-speech-balloon-icon">
											<use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
										</svg>
										<span th:text="${article.commentCount}"></span>
									</a>
								</li>
								<li>
									<a style="margin-left: 10px" href="#" class="post-add-icon inline-items">
										<svg class="olymp-heart-icon">
											<use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
										</svg>
										<span th:text="${article.likeCount}"></span>
									</a>
								</li>
								<li>
									<a style="margin-left: 10px" href="#" class="post-add-icon inline-items">
										<svg class="olymp-share-icon">
											<use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon">
											</use>
										</svg>
										<span th:text="${article.article.readCount}"></span>
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href="#">
										<img src="img/icon-chat26.png" alt="icon" data-toggle="tooltip" data-placement="top" data-original-title="LIKE">
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/icon-chat27.png" alt="icon" data-toggle="tooltip" data-placement="top" data-original-title="COOL">
									</a>
								</li>
							</ul>

						</div>
					</article>

					<!-- ... end Single Post -->


					<!-- Comments -->
					<ul class="comments-list">
						<li class="comment-item has-children" th:each="comment, commentState : ${article.articleComments}">
							<p class="d-none" th:text="${comment.articleComment.articleCommentId}"></p>
							<div class="post__author author vcard inline-items">
								<img src="img/avatar10-sm.jpg" alt="author" th:src="${comment.imagePath}">
								<div class="author-date">
									<a class="h6 post__author-name fn" href="#" th:text="${comment.userName}"></a>
									<div class="post__date">
										<time class="published" datetime="2017-03-24T18:18" th:text="${comment.articleComment.commentTime}">

										</time>
									</div>
								</div>

								<a href="#" class="more">
									<svg class="olymp-three-dots-icon">
										<use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
									</svg>
								</a>

							</div>

							<p th:text="${comment.articleComment.commentContent}"></p>

							<a href="#" class="post-add-icon inline-items">
								<svg class="olymp-heart-icon">
									<use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
								</svg>
								<span>8</span>
							</a>
							<a href="#" class="reply" onclick="showComment(this, 0);return false;">回复</a>
							<ul class="children" th:if="${comment.childComments}">
								<li class="comment-item" th:each="childComment,childCommentState : ${comment.childComments}">
									<p class="d-none" th:text="${childComment.articleComment.articleCommentId}"></p>
									<div class="post__author author vcard inline-items">
										<img src="img/avatar8-sm.jpg" alt="author" th:src="${childComment.imagePath}">
										<div class="author-date">
											<a class="h6 post__author-name fn" href="#" th:text="${childComment.userName}"></a>
											<div th:if="${childComment.toUserName} ne null" style="display: inline-block">
												<span>回复</span>
												<a th:href="@{/lookUserProfilePage(userName=${childComment.toUserName})}"
												th:text="'@'+${childComment.toUserName}"></a>
											</div>
											<div class="post__date">
												<time class="published" datetime="2017-03-24T18:18" th:text="${childComment.articleComment.commentTime}">
												</time>
											</div>
										</div>

										<a href="#" class="more">
											<svg class="olymp-three-dots-icon">
												<use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
											</svg>
										</a>

									</div>

									<p th:text="${childComment.articleComment.commentContent}"></p>

									<a href="#" class="post-add-icon inline-items">
										<svg class="olymp-heart-icon">
											<use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
										</svg>
										<span>2</span>
									</a>
									<a href="#" class="reply" onclick="showComment(this, 1);return false;">回复</a>
								</li>
							</ul>
						</li>
					</ul>

					<!-- ... end Comments -->

<!--					<a href="#" class="more-comments">View more comments <span>+</span></a>-->


					<!-- Comment Form  -->

					<form class="comment-form inline-items">
						<div class="post__author author vcard inline-items">
							<div th:if="${session.loginUser != null}">
								<img th:src="${session.loginUser.imagePath}" alt="author">
							</div>
							<div class="form-group with-icon-right is-empty">
								<textarea class="form-control" placeholder=""></textarea>
								<div class="add-options-message">
									<a href="#" class="options-message" data-toggle="modal"
									   data-target="#update-header-photo">
										<svg class="olymp-camera-icon">
											<use xlink:href="#olymp-camera-icon"></use>
										</svg>
									</a>
								</div>
								<span class="material-input"></span></div>
						</div>
						<button class="btn btn-md-2 btn-primary" onclick="postComment(this);return false;">
							发表评论
						</button>
						<button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color"
								onclick="hideComment(this);return false;">
							取消
						</button>
					</form>
					<!-- ... end Comment Form  -->			</div>
			</div>

			<div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
				<aside>
					<div class="ui-block">
						<div class="ui-block-title">
							<h6 class="title">作者信息
							</h6>
						</div>
						<article class="hentry blog-post blog-post-v3 featured-post-item">
							<div class="row">
								<div class="col-12" style="text-align: center;margin-top: 5px">
									<div class="author-thumb">
										<a href=""><img style="width: 70px;height: 70px" alt="author" th:src="${article.author.imagePath}" src="img/friend-harmonic7.jpg" class="avatar"></a>
										<a href="#" class="btn-mini btn btn-success" style="margin-top: 5px">关注</a>
									</div>
								</div>
							</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">昵称：<a href="#">[[${article.author.userName}]]</a></div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">邮箱：[[${article.author.email}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">微信：[[${article.author.wechat}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">性别：[[${article.author.sex==0?"男":"女"}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">年龄：[[${#dates.year(#dates.createNow()) - #dates.year(article.author.bornDate)}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">生日：[[${#dates.format(article.author.bornDate,'MM-dd')}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">地区：[[${article.author.location}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">职业：[[${article.author.career}]]</div>
							<div class="row" style="padding: 0px 40px 0px 40px;color: #515365;">注册时间：[[${#dates.format(article.author.registerTime,'yyyy-MM-dd HH:mm')}]]</div>
							<div class="row" style="padding: 0px 40px 20px 40px;color: #515365;">个人说明：[[${article.author.info}]]</div>
							<div class="row" style="padding: 0px 40px 20px 40px;color: #515365;">
								<div class="post-additional-info inline-items" >

									<div class="friends-harmonic-wrap">
										<ul class="friends-harmonic">
											<li>
												<a href="#">
													<img src="img/icon-chat2.png" alt="icon">
												</a>
											</li>
										</ul>
										<div class="names-people-likes" style="margin-right: 15px">
											粉丝·37
										</div>
										<ul class="friends-harmonic">
											<li>
												<a href="#">
													<img src="img/icon-chat26.png" alt="icon">
												</a>
											</li>
										</ul>
										<div class="names-people-likes" style="margin-right: 15px">
											关注·10
										</div>
										<ul class="friends-harmonic">
											<li>
												<a href="#">
													<img src="img/icon-chat21.png" alt="icon">
												</a>
											</li>
										</ul>
										<div class="names-people-likes">
											发布·37
										</div>
									</div>
								</div>
							</div>
						</article>
					</div>
					<div class="ui-block">
						<div class="ui-block-title">
							<h6 class="title">Ta的最新文章
							</h6>
						</div>
						<div class="ui-block-content">
							<ul style="list-style-type: disc;list-style: inside">
								<li th:each="a:${shows}" style="margin: 5px 0px">
									<a th:href="@{/read-article(uId=${a.getUserId()},uName=${article.author.userName},aId=${a.articleId},title=${a.articleTitle})}" th:text="${a.articleTitle}">SpringBoot整合FTP服务</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="ui-block">
						<div class="ui-block-title">
							<h6 class="title">你可能感兴趣
							</h6>
						</div>
						<div class="ui-block-content">
							<ul style="list-style-type: disc;list-style: inside">
								<li th:each="a:${interest}" style="margin: 5px 0px">
									<a th:href="@{/read-article(uId=${a.getUserId()},uName=${article.author.userName},aId=${a.articleId},title=${a.articleTitle})}" th:text="${a.articleTitle}">SpringBoot整合FTP服务</a>
								</li>
							</ul>
						</div>
					</div>
				</aside>
			</div>

		</div>

	</div>





	<!-- Window-popup Update Header Photo -->

	<!--评论弹窗-->
	<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel"
		 aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-title">
					<h3 id="reply-name"></h3>
				</div>
				<div class="modal-body">
					<div class="post__author author vcard inline-items">
						<div th:if="${session.loginUser != null}">
							<img th:src="${session.loginUser.imagePath}" alt="author">
						</div>
						<div class="form-group with-icon-right is-empty w-75">
							<textarea class="form-control" placeholder="" id="comment-content"></textarea>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="publishReplyComment();">发布</button>
				</div>
			</div>
		</div>
	</div>
	<!-- ... end Window-popup Update Header Photo -->

	<!-- Window-popup Choose from my Photo -->

	<!-- ... end Window-popup Choose from my Photo -->


	<a class="back-to-top" href="#">
		<img src="svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
	</a>


	<!-- Window-popup-CHAT for responsive min-width: 768px -->
	<!--聊天窗口 -->
	<div th:replace="~{chatCommon :: chatCommon}"></div>
	<div th:replace="~{findFriendModel :: modal}"></div>
	<br>
</div>
<!-- ... end Window-popup-CHAT for responsive min-width: 768px -->

<script src="js/jQuery/jquery-3.4.1.js"></script>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
htmlDecode      : "style,script,iframe",  // you can filter tags decode
taskList        : true,
tex             : true,  // 默认不解析
flowChart       : true,  // 默认不解析
sequenceDiagram : true,  // 默认不解析
});
});
<!-- JS Scripts -->
</script>
<!--<script src="js/index.js"></script>-->
<script src="js/libs/jquery.appear.js"></script>
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/perfect-scrollbar.js"></script>
<script src="js/libs/jquery.matchHeight.js"></script>
<script src="js/libs/svgxuse.js"></script>
<script src="js/libs/imagesloaded.pkgd.js"></script>
<script src="js/libs/Headroom.js"></script>
<script src="js/libs/velocity.js"></script>
<script src="js/libs/ScrollMagic.js"></script>
<script src="js/libs/jquery.waypoints.js"></script>
<script src="js/libs/jquery.countTo.js"></script>
<script src="js/libs/popper.min.js"></script>
<script src="js/libs/material.min.js"></script>
<script src="js/libs/bootstrap-select.js"></script>
<script src="js/libs/smooth-scroll.js"></script>
<script src="js/libs/selectize.js"></script>
<script src="js/libs/swiper.jquery.js"></script>
<script src="js/libs/moment.js"></script>
<script src="js/libs/daterangepicker.js"></script>
<script src="js/libs/fullcalendar.js"></script>
<script src="js/libs/isotope.pkgd.js"></script>
<script src="js/libs/ajax-pagination.js"></script>
<script src="js/libs/Chart.js"></script>
<script src="js/libs/chartjs-plugin-deferred.js"></script>
<script src="js/libs/circle-progress.js"></script>
<script src="js/libs/loader.js"></script>
<script src="js/libs/run-chart.js"></script>
<script src="js/libs/jquery.magnific-popup.js"></script>
<script src="js/libs/jquery.gifplayer.js"></script>
<script src="js/libs/mediaelement-and-player.js"></script>
<script src="js/libs/mediaelement-playlist-plugin.min.js"></script>
<script src="js/libs/ion.rangeSlider.js"></script>
<script src="js/main.js"></script>
<script src="js/libs-init/libs-init.js"></script>
<script defer src="fonts/fontawesome-all.js"></script>
<script src="Bootstrap/dist/js/bootstrap.js"></script>
<script src="Bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="js/xtiper.min.js"></script>
<div th:replace="~{common :: common}"></div>
<script>

	var article_id, target_name, target_comment_id;
	$(document).ready(function () {
		article_id = $("#articleId").text().trim();
		console.info(article_id);
	});
	/**
	 * 显示回复评论框
	 */
	function showComment(e, flag) {
		console.info(flag);
		target_name = $(e).parent().children("div").children("div").children("a").text().trim();
		// 设置标题
		$("#reply-name").text("回复：" + target_name);
		if(flag === 0){
			target_comment_id = $(e).parent().children().eq(0).text().trim();
		}else{
			target_comment_id = $(e).parent().parent().parent().children().eq(0).text().trim();
		}
		console.info("文章ID: " + article_id + "目标评论ID：" + target_comment_id + "目标评论用户名: " + target_name);
		$('#commentModal').modal('show');

	}

	/**
	 * 发表评论
	 */
	function postComment(e) {
		let userName = $("#loginedUserName").text();
		let commentContent = $(e).prev().children(".form-group")
				.children("textarea").val();
		console.info("用户名：" + userName + "评论内容：" + commentContent + "文章ID：" + article_id);
		$.ajax({
			type: "POST",
			url: "publish/comment/" + userName + "/" + commentContent + "/ " + article_id,
			success: function (result) {
				console.info(result);
				if (result === "OK") {
					xtip.msg("发表评论成功，刷新可查看");
					// window.location.reload();
					$(e).prev().children(".form-group")
							.children("textarea").val("");
				}

			},
			error: function () {

			}

		})
	}

	function hideComment(e) {
		$(e).parent().addClass("d-none");
	}

	/**
	 * 回复评论
	 */
	function publishReplyComment() {
		let commentContent = $("#comment-content").val();
		let userName = $("#loginedUserName").text().trim();
		console.info("文章ID" + article_id + "目标评论ID：" + target_comment_id + "目标评论用户名: " + target_name + " 当前用户：" + userName);

		$.ajax({
			type: "POST",
			url: "publish/reply/" + userName + "/ " + target_name + "/" + commentContent + "/" + article_id + "/" + target_comment_id,
			success: function (result) {
				console.info(result);
				if (result === "OK") {
					xtip.msg("回复成功，刷新可查看")
					// window.location.reload();
					$('#commentModal').val("");
					$('#commentModal').modal('hide');
				}

			}
		})
	}


</script>
</body>
</html>